<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    :close-delay="200"
    :loading="loading"
    @close="closeDialog"
  >
    <el-descriptions title="人员信息" :column="2">
      <el-descriptions-item label="姓名">{{
        detailInfo.length > 0 ? detailInfo[0].personName : ""
      }}</el-descriptions-item>
      <el-descriptions-item label="证件号码">{{
        detailInfo.length > 0 ? detailInfo[0].cardNumber : ""
      }}</el-descriptions-item>
    </el-descriptions>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>合同信息</span>
        </div>
      </template>
      <el-descriptions v-for="item in detailInfo" :key="item.id" :column="3" :title="`合同编号:` + item.code">
        <el-descriptions-item label="所属企业">{{ item.corpName }}</el-descriptions-item>
        <el-descriptions-item label="合同类型">{{ item.typeName }}</el-descriptions-item>
        <el-descriptions-item label="签订类型">{{ item.signingTypeName }}</el-descriptions-item>
        <el-descriptions-item label="合同签订日期">{{ item.signingDate }}</el-descriptions-item>
        <el-descriptions-item label="合同终止日期">{{ item.endDate }}</el-descriptions-item>
        <el-descriptions-item label="工资计算方式">{{ item.salaryCalculationMethodName }}</el-descriptions-item>
        <el-descriptions-item label="工资标准">{{ item.wageStandard }}</el-descriptions-item>
        <el-descriptions-item label="工资支付日期">{{ item.salaryPaymentDate }}</el-descriptions-item>
        <el-descriptions-item></el-descriptions-item>
        <el-descriptions-item label="合同附件" span="3">
          <span v-for="attachment in item.attachments" :key="attachment.id" style="padding: 0 20px">
            <el-link type="primary" :underline="false" :href="attachment.id">
              {{ attachment.attachmentName }}
            </el-link>
          </span>
        </el-descriptions-item>
        <el-divider />
      </el-descriptions>
    </el-card>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useScreen } from "@/store/modules/screen";
import { GetContractsByCardNumber, GetContractsByProjectAndCorpIdAndPersonId } from "@/api/contract/index";

//声明变量
const size = ref("");
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const itemSpan = ref(12);
const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "详情",
      footBtn: "详情",
      id: 0,
      projectId: 0,
      corpId: 0,
    }),
  },
});
const detailInfo = ref([] as any[]);
const { dialogDetail } = toRefs(props);
const emit = defineEmits(["sendClose"]);
const loading = ref(false);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 24;
  } else {
    screenWidth.value = 900;
    itemSpan.value = 12;
  }
}
const initForm = async function () {
  let tempFormData;
  if (dialogDetail.value.id) {
    loading.value = true;
    tempFormData = await GetContractsByProjectAndCorpIdAndPersonId(
      dialogDetail.value.id,
      dialogDetail.value.projectId,
      dialogDetail.value.corpId
    );
    console.log("tempFormData", tempFormData);
    tempFormData = tempFormData.data;
    detailInfo.value = tempFormData;
    loading.value = false;
    tempFormData = null;
  }
};
watch(
  () => dialogDetail.value.visible,
  () => {
    if (dialogDetail.value.visible) {
      initForm();
    }
  }
);

onMounted(async () => {
  initScreen();
});

/**
 * 关闭弹窗
 */
function closeDialog(needRefresh: boolean) {
  emit("sendClose", needRefresh);
}
</script>

<style lang="scss" scoped>
.cell-item-width {
  min-width: 150px !important;
}
.cell-item {
  //width: 120px !important;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}
:deep(.el-cascader) {
  width: 100%;
}
:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
:deep(.el-card__header) {
  background-color: rgb(250, 250, 250);
  font-weight: bolder;
}
:deep(.el-card__header span) {
  font-size: 16px;
  line-height: 40px;
  font-weight: bolder;
}
:deep(.el-card__body .el-descriptions__title) {
  font-size: 16px;
  color: #696868;
}
</style>
